<template>
  <div class="myDiv">
    <Header title="设备订单信息"></Header>
    <div class="chaxun">
      <div class="chaxunleft">
        <van-cell-group>
          <van-field v-model="select.username" placeholder="请输入姓名" label-width="100px" label="姓名" />
        </van-cell-group>
      </div>
      <div class="chaxunright">
        <el-form :model="select" class="select">
          <el-form-item label="体检状态:" :label-width="formLabelWidth">
            <el-select v-model="select.used" style="width:120px" size="mini">
              <el-option label="体检开始" :value="'1'"></el-option>
              <el-option label="未体检" :value="'0'"></el-option>
              <el-option label="体检结束" :value="'2'"></el-option>
              <el-option label="手动关闭" :value="'3'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款状态:" :label-width="formLabelWidth">
            <el-select v-model="select.state" style="width:120px" size="mini">
              <el-option label="已付款" value="1"></el-option>
              <el-option label="未付款" value="0"></el-option>
              <el-option label="预约" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="vant-btn">
          <van-button
            type="info"
            size="small"
            style="margin-top: 5px; width:100px;"
            @click="selectPatientInfo"
          >查询</van-button>
          <van-button
            type="info"
            size="small"
            style="margin-top: 5px; width:100px;"
            @click="reset"
          >重置</van-button>
        </div>
      </div>
    </div>
    <el-table
      :data="vesssel"
      v-loading="loading"
      border
      height="458"
      style="width: 100%"
      size="mini"
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
      @row-click="showdata"
    >
      <el-table-column fixed prop="username" align="center" label="用户名"></el-table-column>
      <el-table-column align="center" width="85" label="检查状态">
        <template
          slot-scope="scope"
        >{{scope.row.used==0?'未体检':scope.row.used==1?'体检开始':scope.row.used==3?'已手动关闭':'体检结束'}}</template>
      </el-table-column>
      <el-table-column prop="state" align="center" label="付款状态">
        <template slot-scope="scope">{{scope.row.state==0?'未付款':scope.row.state==1?'已付款':'预约'}}</template>
      </el-table-column>
      <el-table-column prop="orderPhone" width="100" align="center" label="电话"></el-table-column>
    </el-table>
    <!-- 弹出层 -->
    <van-popup v-model="show" round position="bottom" :style="{ height: '75%'}">
      <!-- 展示详情 -->
      <div class="info">
        <van-field label="用户名" :readonly="true" label-width="130px" v-model="form.username" />
        <van-field
          label="检查类型"
          :readonly="true"
          label-width="130px"
          v-if="models[form.types-1]"
          v-model="models[form.types-1].value"
        />
        <van-field label="总价格" :readonly="true" label-width="130px" v-model="form.orderTotalprice" />
        <van-field label="支付方式" :readonly="true" label-width="130px" v-model="form.orderPayment" />
        <van-field label="体检医生" :readonly="true" label-width="130px" v-model="form.orgname" />
        <van-field label="设备编码" :readonly="true" label-width="130px" v-model="form.deviceNo" />
        <van-field label="设备名称" :readonly="true" label-width="130px" v-model="form.orderAddr" />
        <van-field label="订单号" :readonly="true" label-width="130px" v-model="form.idcode" />
        <van-field label="添加时间" :readonly="true" label-width="130px" v-model="form.addtime" />
      </div>
      <!-- 操作订单 -->
      <div class="switch">
        <van-button round @click="toggleOrder(1)" :disabled="openbtn" type="info">开启订单</van-button>
        <van-button round @click="toggleOrder(0)" :disabled="closebtn" type="warning">关闭订单</van-button>
      </div>
      <div class="switch">
        <p>{{message}}</p>
      </div>
    </van-popup>
    <Page ref="page" :total="total" @pagenum="pagenum"></Page>
  </div>
</template>

<script>
import Header from "@/components/header";
import Page from "@/components/pagination";
export default {
  components: { Header, Page },
  data() {
    return {
      // 查询的数据
      select: {
        username: "",
        state: "",
        used: ""
      },
      models: [], //检查类型的数据
      form: {}, //存储点击的数据
      page: 1,
      rows: 10,
      loading: true,
      total: 0,
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      formLabelWidth: "75px",
      message: "",
      show: false,
      openbtn: false,
      closebtn: false
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / 10)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = data[1];
    },
    //关闭订单
    updateOrder() {
      this.$http(this.api.closeOrderState, {
        idcode: this.form.idcode,
        used: this.form.used
      }).then(res => {
        this.message = res.data.message;
      });
    },
    //显示弹框
    showdata(row) {
      this.show = !this.show;
      this.form = row;
      //   used 0未体检；1体检开始；2体检结束
      // state     0未付款；1已付款 ；3预约
      if (row.state == 0 || row.used == 2 || row.used == 1) {
        this.openbtn = true;
      } else {
        this.openbtn = false;
      }
      if (row.used == 2 || row.used == 3) {
        this.closebtn = true;
      } else {
        this.closebtn = false;
      }
    },
    //按钮 开启/关闭订单
    toggleOrder(i) {
      if (i === 1) {
        // 开启订单
        this.open();
      } else if (i === 0) {
        // 关闭订单
        this.updateOrder();
      }
      this.init();
      setTimeout(() => {
        this.message = "";
        this.show = !this.show;
      }, 1000);
    },
    // 开启订单的请求
    open() {
      this.$http(this.api.openOrderStateByIdcode, {
        idcode: this.form.idcode,
        used: this.form.used,
        state: this.form.state
      }).then(res => {
        this.message = res.data.message;
      });
    },
    // 查询按钮
    selectPatientInfo() {
      // 获取设备订单
      this.$http(this.api.getAllOrder, this.select).then(res => {
        if (res.data.result == "true") {
          this.$refs.page.changecurrent(1);
          this.total = res.data.pageData.total;
          this.tableData = res.data.pageData.data;
          this.vesssel = this.tableData.slice(0, this.rows);
        }
      });
    },
    //重置按钮
    reset() {
      this.select.username = "";
      this.select.state = "";
      this.select.used = "";
      this.init();
    },
    // 初次加载的数据
    init() {
      // 获取设备订单检查类型
      this.$http(this.api.DictionaryModels, {
        catCode: "DetectionSetMeal"
      }).then(res => {
        this.models = res.data.pageData.data;
        // 获取设备订单
        this.$http(this.api.getAllOrder, {
          delstate: 0,
          page: 1,
          rows: 20,
          sort: "addtime",
          order: "desc"
        }).then(res => {
          this.tableData = res.data.pageData.data;
          this.vesssel = this.tableData.slice(0, this.rows);
          this.loading = false;
          this.total = res.data.pageData.total;
          this.$refs.page.changecurrent(1);
        });
      });
    }
  },
  created() {
    this.init();
  }
};
</script>
<style scoped>
.chaxun {
  width: 100%;
}
.chaxunleft {
  width: 100%;
}
.chaxunright {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.sex {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}
.sex .van-radio {
  width: 26%;
}
.select .el-form-item {
  margin-bottom: 0;
}
.vant-btn {
  display: flex;
  flex-direction: column;
}
.switch {
  width: 80%;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}
.switch p {
  color: red;
}
.info {
  padding-top: 10px;
}
</style>
